<template>
  <view>
        <view class="goods-item">
          <!-- 设置商品左侧勾选 -->
       <view class="radio-center" v-if="showRadio">
          <radio :checked="goods.goods_state" color="#c00000" @click="radioChange" />
       </view>
          <!-- 商品左侧图片区域 -->
          <view  @click="getID(goods.goods_id)" class="goods-item-left">
            <image :src="goods.goods_small_logo || 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'" class="goods-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view @click="getID(goods.goods_id)" class="goods-name">{{goods.goods_name}}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
              <view class="number-box" v-if="showNumber">
                <uni-number-box :value="goods.goods_count" @change="changeNumber" :min="1"></uni-number-box>
              </view>
            </view>
          </view>
        </view>
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    data(){
      return{
        demo:'测试'
      }
    },
    props:{
      // 设置默认商品数据
      goods:{
        // 默认数据设置
          default: 1,
        // 是否必填项
          required: false
      },
      // 设置是否显示radio勾选
      showRadio:{
        // 类型布尔
        type:Boolean,
        // 默认不显示
        default:false
      },
      // 设置是否显示计数器
      showNumber:{
        // 类型布尔
        type:Boolean,
        // 默认不显示
        default:false
      }
    },
    onLoad() {
      console.log(1)
    },
    filters:{
        // 把数字处理为带两位小数点的数字
        tofixed(num) {
          console.log(typeof(num))
          return num.toFixed(2)
        }
    },
    methods:{
      // 触发商品计数器
      changeNumber(value){
        this.$emit('numberChange',{
          goods_id: this.goods.goods_id,
          goods_count: Number(value)
        })
      },
      // 触发商品勾选
      radioChange(){
        this.$emit('radioChange',this.goods)
      },
      getID(id){
        console.log(id)
        uni.navigateTo({
          url:'../../subpkg/goods-detail/goods-detail?goods_id=' + id
        })
      }
    }
  }
</script>

<style lang="scss">
 .goods-item {
    display: flex;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;

    .goods-item-left {
      margin-right: 5px;

      .goods-pic {
        width: 100px;
        height: 100px;
        display: block;
      }
    }

    .goods-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .goods-name {
        font-size: 13px;
      }

      .goods-price {
        font-size: 16px;
        color: #c00000;
      }
    }
  }
  .radio-center{
      display:flex;
      align-items:center;
  }
  .number-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
